<template>
  <!-- 待更改 -->
	<div class="content" v-watermark="{text:'西蜀网',time:Date.now()}">
      <div class="content-nav">
        <div class="content-nav-user">
          <div class="headImage">
          </div>
          <div class="name">郭玲玲</div>
          <div class="line"></div>
        </div>
        <div class="content-nav-status">
            <div class="">
              今日预计到店: 10
            </div>
            <div class="">
              今日实际到店：10
            </div>
            <div class="">
              今日待到店：10
            </div>
            <div @click="loginout">注销</div>
        </div>
      </div>
      <div class="content-main">
        <div class="content-main-inputBox">
          <input type="span" placeholder="编号/姓名/手机号" >
          <div class="searchBtn">
            搜索
          </div>
        </div>
        <div class="content-main-result">
            <span>搜索结果</span>
            <div class="list">
              <div class="list-head">
                <div>头像</div>
                <div>编号</div>
                <div>姓名</div>
                <div>性别</div>
                <div>年龄</div>
                <div>来源</div>
                <div>标签</div>
              </div>
              <div class="list-body">
                <div class="item" v-for="(item,index) in 3">
                  <div class="">
                    <div class="image">
                    </div>
                  </div>
                  <div>40</div>
                  <div>xxx</div>
                  <div>男</div>
                  <div>11</div>
                  <div>注册</div>
                  <div>A类用户</div>
                </div>
              </div>
            </div>
        </div>
      </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
  methods: {
    loginout() { 
      this.$store.dispatch('user/loginout')
    }
  }
	}
</script>

<style lang="scss">
	.content {
    display: flex;
    flex-direction: column;
    min-width: 100vw;
    min-height: 100vh;
    background-color: #FFFFFF;
  }
  .content-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    background-color: #9B9B9B;
    height: 153px;
    .content-nav-user {
      display: flex;
      flex-direction: row;
      align-items: center;
      .headImage {
        margin: 36px 22px 39px 53px;
        width: 78px;
        height: 78px;
        background-color: rgba(19,131,238,1);
        border-radius: 50%;
        span-align: center;
        line-height: 78px;
      }
      .name {
        color: rgba(16,16,16,1);
        font-family: PingFangSC-bold;
        font-weight: bold;
        font-size: 20px;
      }
      .line {
        height: 28px;
        background-color: rgba(255,255,255,1);
        width: 5px;
        margin-left: 28px;
        margin-right: 28px;
      }
    }
    .content-nav-status {
      display: flex;
      flex-direction: row;
      align-items: center;
      div {
        margin-right: 55px;
        color: rgba(16,16,16,1);
        font-size: 20px;
        font-family: PingFangSC-bold;
        font-weight: bold;
      }
    }
  }
  .content-main {
    .content-main-inputBox {
      margin-top: 23px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 66px;
      margin-bottom: 18px;
      input {
        width: 979px;
        height: 41px;
        color: rgba(16,16,16,1);
        border: 1px solid rgba(220,223,230,1);
        border-radius: 4px 4px 4px 4px;
        background-color: rgba(255,255,255,1);
        font-size: 14px;
        margin-right: 43px;
        box-sizing: border-box;
        padding-left: 61.2px;
      }
      .searchBtn {
        width: 70px;
        height: 41px;
        border-radius: 4px;
        background-color: rgba(164,173,179,1);
        color: rgba(255,255,255,1);
        font-size: 14px;
        span-align: center;
        line-height: 41px;
        font-family: Microsoft Yahei;
      }
    }
    .content-main-result {
      margin-left: 51px;
      > span {
        margin-left: 18px;
        color: rgba(144,147,153,1);
        font-size: 16px;
      }
      .list {
        margin-top: 53px;
        .list-head {
          margin-left: 18px;
          display: flex;
          flex-direction: row;
          align-items: center;
          color: rgba(144,147,153,1);
          font-size: 16px;
          &:first-child {
            margin-left: -15px;
          }
          > div {
            width: 99px;
            margin-right: 50px;
            span-align: center;
          }
        }
        .list-body {
          width: 1173px;
          height: 1px;
          .item {
        
            margin-top: 36px;
            border-bottom: 1px solid #BBBBBB;
            padding-bottom: 23px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            > div {
             width: 99px;
             margin-right: 50px;
             span-align: center;
             color: rgba(144,147,153,1);
             font-size: 16px;
             &:first-child {
               margin-left: -15px;
             }
            }
            .image {
              width: 50px;
              height: 50px;
              margin: 0 auto;
              background-color: rgba(155,155,155,1);
            }
          }
        }
      }
    }
  }
</style>
